<script lang="ts" setup>
// 引入所需的 Ant Design Vue 组件和自定义组件
import { RouterView, useRouter } from 'vue-router';
import AppHeader from '@/components/Header/index.vue';
import SideBar from '@/components/NewSider/index.vue';
import { BookOutlined, CloudUploadOutlined, LeftOutlined, UserOutlined } from '@ant-design/icons-vue';
import { fetchKnowledgeSpaceApi } from '@/api/Teacher/resourceApi';
import { onMounted, ref } from 'vue';

const knowledgeId = ref('');
const router = useRouter();
const dynamicKey = ref('');

const getKnowledgeSpaceId = async () => {
  const response = await fetchKnowledgeSpaceApi();
  knowledgeId.value = response.data.courseFileId;
}
const handleBack = () => {
  router.push('/user/homepagesquare');
};
onMounted(async () => {
  await getKnowledgeSpaceId();
  const path = `${encodeURIComponent(knowledgeId.value)}%7C`;
  const basicPath = "/teacher/manage/knowledgespace/"
  dynamicKey.value = `${basicPath}${path}`;
});
</script>

<template>
  <a-layout class="work-body">
    <SideBar>
      <template #top-buttons>
        <div />
      </template>
      <template #menu-content>
        <a-menu-item
          key="/teacher/manage/course/course"
          class="py-6 text-xl"
        >
          <template #icon>
            <UserOutlined alt="我的课程" style="font-size: 1.2rem;" />
          </template>
          我的课程
        </a-menu-item>
        <a-menu-item
          key="/teacher/manage/update/uploadstate"
          class="py-6 text-xl"
        >
          <template #icon>
            <CloudUploadOutlined alt="我的上传" style="font-size: 1.2rem;" />
          </template>
          我的上传
        </a-menu-item>
        <a-menu-item
          :key="dynamicKey"
          class="py-6 text-xl"
        >
          <template #icon>
            <BookOutlined alt="知识空间" style="font-size: 1.2rem;" />
          </template>
          知识空间
        </a-menu-item>
      </template>
    </SideBar>
    <a-layout class="main-layout" style="background-color: transparent;">
      <AppHeader style="background-color: transparent;">
        <template #right-section>
          <a-button type="default" style="font-size: 14px; margin-right: 1rem ;" @click="handleBack">
            <template #icon>
              <LeftOutlined />
            </template>
            返回创新广场
          </a-button>
        </template>
      </AppHeader>
      <a-layout-content class="work-main-right" style="background-color: transparent;">
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.work-body {
  height: 100vh;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  overflow-y: hidden;
  overflow-x: auto;
}
.work-main-right {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 100vh; /* 设置最大高度 */
  overflow-y: auto;
  padding-top: 1.875rem;
  background-color: #fff;
  padding-left: 20px;
}
.main-layout {
  background-size: cover;
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
